<template>
    <div>
        <section class="data_section">
            <header class="section_title">数据统计</header>
            <el-row :gutter="20">
                <el-col :span="4"
                >
                    <div class="data_list all_head">
                        <span class="data_num head">总数据：</span>
                    </div>
                </el-col
                >
                <el-col :span="4"
                >
                    <div class="data_list">
                        <span class="data_num">{{ Customertotal }}</span> 注册用户
                    </div>
                </el-col
                >
                <el-col :span="4"
                >
                    <div class="data_list">
                        <span class="data_num">{{ Shoptotal }}</span> 注册商铺
                    </div>
                </el-col
                >
                <el-col :span="4"
                >
                    <div class="data_list">
                        <span class="data_num">{{ Producttotal }}</span> 注册商品
                    </div>
                </el-col
                >
                <el-col :span="4"
                >
                    <div class="data_list">
                        <span class="data_num">{{ Usertotal }}</span> 管理员
                    </div>
                </el-col
                >
            </el-row>
        </section>
        <div>
            <div ref="echartestOne" style="width: 500px; height: 400px; margin-left:250px" ></div>
        </div>
    </div>
</template>

<script>
     import {getHomeData} from "../../../api/api";
    import * as echarts from "echarts";

    export default {
        data() {
            return {
                Usertotal: 10,
                Producttotal: 2,
                Customertotal: 5,
                Shoptotal: 1,
            };
        },
        created(){
            document.title = "后台管理系统"
            getHomeData().then(res=>{
                console.log(res)
            });
        },
        mounted() {
            var that = this;
            setTimeout(function () {
                that.setTest();
            }, 500)
        },
        methods: {
            setTest() {
                let myChart = echarts.init(this.$refs.echartestOne);
                let option = {
                    xAxis: {
                        type: "category",
                        data: ["注册用户", "注册商铺", "商品", "管理员"],
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            data: [this.Customertotal, this.Shoptotal, this.Producttotal, this.Usertotal],
                            type: "bar",
                            showBackground: true,
                            backgroundStyle: {
                                color: "rgba(220, 220, 220, 0.8)",
                            },
                        },
                    ],
                };
                myChart.setOption(option);
            },
        },
    };
</script>

<style lang="scss" scoped>

    .data_section {
        padding: 0px;
        margin-bottom: 20px;
        .section_title {
            text-align: center;
            font-size: 30px;
            margin-bottom: 10px;

        }

        .data_list {
            text-align: center;
            font-size: 14px;
            color: #666;
            border-radius: 6px;
            background: #e5e9f2;

            .data_num {
                color: #333;
                font-size: 26px;

            }

            .head {
                border-radius: 6px;
                font-size: 22px;
                padding: 4px 0;
                color: #fff;
                display: inline-block;
            }
        }

        .today_head {
            background: #ff9800;
        }

        .all_head {
            background: #20a0ff;
        }
    }

</style>
